<!--
 * @Author: chen qi
 * @Date: 2022-07-11 20:38:58
 * @LastEditors: chen qi
 * @LastEditTime: 2022-07-12 00:26:48
 * @Description:
-->
<template>
  <div
    :ref="`mapChart${id}`"
    class="map-chart"
  ></div>
</template>

<script>
import commonMixin from '@/utils/mixin'
var data = [
  {
    name: '四川',
    // value: [122.24, 29.55, 100],
    selected: true
  }
]
var mapDate = [
  {
    name: '青岛',
    value: [120.417483, 36.110931],
    datas: 1354
  }

]
export default {
  name: 'mapChart',
  mixins: [commonMixin],
  props: {
    id: {
      type: [Number, String],
      default: 1
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      chartMapData: [
        { name: '北京', value: Math.round(Math.random() * 1000) },
        { name: '天津', value: Math.round(Math.random() * 1000) },
        { name: '上海', value: Math.round(Math.random() * 1000) },
        { name: '重庆', value: Math.round(Math.random() * 1000) },
        { name: '河北', value: Math.round(Math.random() * 1000) },
        { name: '河南', value: Math.round(Math.random() * 1000) },
        { name: '云南', value: Math.round(Math.random() * 1000) },
        { name: '辽宁', value: Math.round(Math.random() * 1000) },
        { name: '黑龙江', value: Math.round(Math.random() * 1000) },
        { name: '湖南', value: Math.round(Math.random() * 1000) },
        { name: '安徽', value: Math.round(Math.random() * 1000) },
        { name: '山东', value: Math.round(Math.random() * 1000) },
        { name: '新疆', value: Math.round(Math.random() * 1000) },
        { name: '江苏', value: Math.round(Math.random() * 1000) },
        { name: '浙江', value: Math.round(Math.random() * 1000) },
        { name: '江西', value: Math.round(Math.random() * 1000) },
        { name: '湖北', value: Math.round(Math.random() * 1000) },
        { name: '广西', value: Math.round(Math.random() * 1000) },
        { name: '甘肃', value: Math.round(Math.random() * 1000) },
        { name: '山西', value: Math.round(Math.random() * 1000) },
        { name: '内蒙古', value: Math.round(Math.random() * 1000) },
        { name: '陕西', value: Math.round(Math.random() * 1000) },
        { name: '吉林', value: Math.round(Math.random() * 1000) },
        { name: '福建', value: Math.round(Math.random() * 1000) },
        { name: '贵州', value: Math.round(Math.random() * 1000) },
        { name: '广东', value: Math.round(Math.random() * 1000) },
        { name: '青海', value: Math.round(Math.random() * 1000) },
        { name: '西藏', value: Math.round(Math.random() * 1000) },
        { name: '四川', value: Math.round(Math.random() * 1000) },
        { name: '宁夏', value: Math.round(Math.random() * 1000) },
        { name: '海南', value: Math.round(Math.random() * 1000) },
        { name: '台湾', value: Math.round(Math.random() * 1000) },
        { name: '香港', value: Math.round(Math.random() * 1000) },
        { name: '澳门', value: Math.round(Math.random() * 1000) }
      ],
      resDebounce: null, // 防抖
      chart: null, // chart实例,
      option1: {
        title: {
          text: '各类救助对象区域分布',
          x: 'left',
          top: '0',
          textStyle: {
            color: '#333333',
            fontSize: 20
          }
        },
        tooltip: {
          show: true
        // formatter:(params)=>{
        //   let data = "测试1:"+params.name + "<br/>"+"值:"+ params.value[2]+"<br/>"+"地理坐标:[" + params.value[0]+","+params.value[1] +"]";
        //   return data;
        // },
        },

        visualMap: {
          type: 'continuous',
          show: true,
          min: 100,
          max: 1000,
          left: 'right',
          inRange: {
            // color: ['#00fffb', '#00bbff', '#0088ff','#0055d4','#002aa6']
            color: ['#3ae582', '#00ad46', '#008d38']
          }
        },
        geo3D: {
          map: 'china',
          roam: true,
          itemStyle: {
            // areaColor: '#fffb13',
            areaColor: '#fd9c5a',
            opacity: 1,
            borderWidth: 0.4,
            borderColor: '#585858'
          },
          label: {
            show: false,
            textStyle: {
              color: '#fff', // 地图初始化区域字体颜色
              fontSize: 14,
              opacity: 0.9,
              backgroundColor: 'rgba(0,0,0,0)'
              // backgroundColor: 'rgba(53,171,199,0)'
            }
          },
          emphasis: { // 当鼠标放上去  地区区域是否显示名称
            label: {
              show: true,
              textStyle: {
                color: 'black',
                fontSize: 3,
                backgroundColor: 'rgba(0,0,0,0)'
              }
            },
            itemStyle: {
              color: '#fd9c5a'
            }
          },
          regions: [{
            name: '北京',
            height: 3
          }, {
            name: '重庆',
            height: 3
          }],
          light: { // 光照阴影
            main: {
              // color: '#3ae582', //光照颜色
              color: '#fff', // 光照颜色
              intensity: 1, // 光照强度
              // shadowQuality: 'high', //阴影亮度
              shadow: false, // 是否显示阴影
              alpha: 45,
              beta: 180

            },
            ambient: {
              intensity: 0.3
            }
          },
          viewControl: {
            // projection: 'orthographic',
            // 取消鼠标旋转，移动，缩放
            rotateSensitivity: 0,
            panSensitivity: 0,
            zoomSensitivity: 0,
            // panMouseButton: 'left',
            // rotateMouseButton: 'right',
            distance: 93,
            alpha: 50,
            beta: 10,
            center: [0, -5, 0]
          },
          left: '-5%',
          top: '-15%',
          right: '-10%',
          bottom: '0'
        },
        series: {
          type: 'map3D',
          map: 'china', // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)
          groundPlane: {	// 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
            show: false,	// 是否显示地面。[ default: false ]
            color: '#aaa'	// 地面颜色。[ default: '#aaa' ]
          },
          realisticMaterial: {
            roughness: 0
          },
          label: { // 标签的相关设置
            show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
            textStyle: { // 标签的字体样式
              color: '#FFFFFF', // 地图初始化区域字体颜色
              fontSize: 14, // 字体大小
              opacity: 1, // 字体透明度
              backgroundColor: 'transparent' // 字体背景色
            }
          },
          itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
            color: '#01183E', // 地图板块的颜色
            opacity: 1, // 图形的不透明度 [ default: 1 ]
            borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
            // borderColor: '#346FE4' // 图形描边的颜色。[ default: #333 ]
            borderColor: '#333333' // 图形描边的颜色。[ default: #333 ]
          },
          emphasis: { // 当鼠标放上去  地区区域是否显示名称
            label: {
              show: true,
              textStyle: {
                color: 'black',
                fontSize: 3,
                backgroundColor: 'rgba(0,0,0,0)'
              }
            },
            itemStyle: {
              color: '#fffb13'
            }
          },
          light: { // 光照阴影
            main: {
              // color: '#3ae582', //光照颜色
              color: '#fff', // 光照颜色
              intensity: 1, // 光照强度
              // shadowQuality: 'high', //阴影亮度
              shadow: false, // 是否显示阴影
              alpha: 45,
              beta: 180

            },
            ambient: {
              intensity: 0.3
            }
          },
          viewControl: {
            // projection: 'orthographic',
            // 取消鼠标旋转，移动，缩放
            rotateSensitivity: 0,
            panSensitivity: 0,
            zoomSensitivity: 0,
            // panMouseButton: 'left',
            // rotateMouseButton: 'right',
            distance: 93,
            alpha: 50,
            beta: 10,
            center: [0, -5, 0]
          },
          left: '-5%',
          top: '-15%',
          right: '-10%',
          bottom: '0',

          data: this.chartMapData
        }
      },
      option2: {
        backgroundColor: 'rgba(0,0,0,1)',
        tooltip: {
          show: true
        },
        geo3D: {
          map: 'china',
          roam: true,
          itemStyle: {
            // areaColor: '#fffb13',
            areaColor: '#fd9c5a',
            opacity: 1,
            borderWidth: 0.4,
            borderColor: '#585858'
          },
          label: {
            show: true,
            textStyle: {
              color: '#fff', // 地图初始化区域字体颜色
              fontSize: 14,
              opacity: 0.9,
              // backgroundColor: 'rgba(0,0,0,0)'
              backgroundColor: 'rgba(53,171,199,0)'
            }
          },
          emphasis: { // 当鼠标放上去  地区区域是否显示名称
            label: {
              show: true,
              textStyle: {
                color: 'black',
                fontSize: 3
                // backgroundColor: 'rgba(0,0,0,0)'
              }
            },
            itemStyle: {
              color: '#fd9c5a'
            }
          },
          regions: [],
          light: { // 光照阴影
            main: {
              // color: '#3ae582', //光照颜色
              color: '#fff', // 光照颜色
              intensity: 1, // 光照强度
              // shadowQuality: 'high', //阴影亮度
              shadow: false, // 是否显示阴影
              alpha: 45,
              beta: 180

            },
            ambient: {
              intensity: 0.3
            }
          },
          viewControl: {
            // projection: 'orthographic',
            // 取消鼠标旋转，移动，缩放
            rotateSensitivity: 0,
            panSensitivity: 0,
            zoomSensitivity: 0,
            // panMouseButton: 'left',
            // rotateMouseButton: 'right',
            distance: 93,
            alpha: 50,
            beta: 10,
            center: [0, -5, 0]
          },
          left: '-5%',
          top: '-15%',
          right: '-10%',
          bottom: '0'
        },
        series: [
          {
            name: 'china',
            type: 'map3D',
            map: 'china',
            // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
            groundPlane: {
              // 是否显示地面。[ default: false ]
              show: false,
              // 地面颜色。[ default: '#aaa' ]
              color: '#aaa'

            },
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              // formatter: (params) => {
              //   if (valArr.find((ele) => ele.name == params.name)) {
              //     return params.name + '\n' + valArr.find((ele) => ele.name == params.name).value
              //   } else {
              //     return params.name
              //   }
              // },
              borderRadius: 4
            },
            itemStyle: {
              color: '#144a69',
              // shadowColor: 'rgba(0,243,255,0.2)',
              // shadowOffsetY: 5,
              // shadowBlur: 10,
              borderColor: '#06767c',
              borderWidth: 1
              // opacity: 1,
            },
            aspectScale: 0.9, // 长宽比
            selectedMode: false // 是否允许选中多个区域
          }
        ]
      }, // 配置
      option: {
        backgroundColor: 'black',
        geo: {
          map: 'china',
          aspectScale: 0.8,
          layoutCenter: ['50%', '50%'],
          layoutSize: '120%',
          itemStyle: {
            normal: {
              areaColor: {
                type: 'linear-gradient',
                x: 0,
                y: 1200,
                x2: 1000,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#152E6E90' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#0673AD' // 50% 处的颜色
                  }
                ],
                global: true // 缺省为 false
              },
              shadowColor: '#276fce',
              shadowOffsetX: 0,
              shadowOffsetY: 15,
              opacity: 0.5
            },
            emphasis: {
              areaColor: '#276fce'
            }
          },
          regions: [
            {
              name: '南海诸岛',
              itemStyle: {
                areaColor: 'rgba(0, 10, 52, 1)',
                borderColor: 'rgba(0, 10, 52, 1)',
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: '#009cc9'
                  }
                }
              },
              label: {
                show: false,
                color: '#FFFFFF',
                fontSize: 12
              }
            }
          ]
        },
        series: [
          {
            type: 'map',
            mapType: 'china',
            aspectScale: 0.8,
            layoutCenter: ['50%', '50%'], // 地图位置
            layoutSize: '120%',
            zoom: 1, // 当前视角的缩放比例
            // roam: true, //是否开启平游或缩放
            scaleLimit: {
              // 滚轮缩放的极限控制
              min: 1,
              max: 2
            },
            label: {
              show: true,
              color: '#FFFFFF80',
              fontSize: 16
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: 'linear-gradient',
                  x: 0,
                  y: 1200,
                  x2: 1000,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#152E6E90' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#0673AD' // 50% 处的颜色
                    }
                  ],
                  global: true // 缺省为 false
                },
                borderColor: '#1cccff50',
                borderWidth: 1.8
              },
              emphasis: {
                // areaColor: '#02102b',
                areaColor: 'rgba(147, 235, 248, 0)',
                label: {
                  color: '#fff'
                }
              }
            },
            data: data
          },
          {
            tooltip: {
              show: false
            },
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              scale: 10,
              brushType: 'stroke'
            },
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                shadowColor: '#0ff',
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                color: 'red'
                // color: function(params) {
                //   var colorList = [
                //     new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                //       {
                //         offset: 0,
                //         color: '#64fbc5'
                //       },
                //       {
                //         offset: 1,
                //         color: '#018ace'
                //       }
                //     ])

                //   ]
                //   return colorList[params.dataIndex]
                // }
              }
            },
            label: {
              normal: {
                color: '#fff'
              }
            },
            symbol: 'circle',
            symbolSize: [6, 2],
            data: mapDate,
            zlevel: 1
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            symbolSize: 10,
            rippleEffect: {
              period: 13,
              scale: 5,
              brushType: 'fill'
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: '{b}',
                color: '#b3e2f2',
                fontWeight: 'bold',
                fontSize: 18
              }
            },

            data: data,
            itemStyle: {
              normal: {
                show: true,
                color: '#a68625',
                shadowBlur: 20,
                shadowColor: '#fff'
              },
              emphasis: {
                areaColor: '#f00'
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.chart = this.$echarts.init(this.$refs[`mapChart${this.id}`])
    this.$axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json').then(res => {
      console.log(res, 'res')
      this.$echarts.registerMap('china', res.data)
      this.chart.setOption(this.option)
      var oldname = '重庆'
      this.chart.on('click', (e) => {
        console.log(e, 3333)
        // this.option.geo3D.regions[0].name = e.name
        // this.option.geo3D.regions[0].height = 10
        // this.option.geo3D.regions[1].name = oldname
        this.chart.setOption(this.option)
        oldname = e.name
      })
    })

    this.resDebounce = this.debounce(this.chart.resize, 300)
    window.addEventListener('resize', this.resDebounce)
  },
  methods: {},
  destroyed() {
    // 防止内存泄露
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    window.addEventListener('resize', this.resDebounce)
  }
}
</script>

<style lang="less" scoped>
.map-chart {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
</style>
